<template>
  <com-card>
    <!--  
      category	商品分类
price	商品价格
imgUrl	商品图片地址
ctime	商品创建时间
rating	商品评价
sellCount	商品销量
goodsDesc	商品描述

     -->
      <div slot="com_title" class="title_head">
      商品列表
      <el-form :model="currentSize" :inline="true">
        <el-form-item label="商品名称">
          <el-input v-model="currentSize.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input
            v-model="currentSize.price"
            placeholder="商品价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select
            v-model="currentSize.category"
            placeholder="请选择菜品分类"
          >
            <el-option
              label="(冒菜)套餐自选区"
              value="(冒菜)套餐自选区"
            ></el-option>
            <el-option label="撸烤串" value="撸烤串"></el-option>
            <el-option label="满减专区" value="满减专区"></el-option>
            <el-option label="营养适配" value="营养适配"></el-option>
            <el-option label="千万销量" value="千万销量"></el-option>
            <el-option label="炒饭系列" value="炒饭系列"></el-option>
            <el-option label="鲜炒盖饭" value="鲜炒盖饭"></el-option>
            <el-option
              label="收藏门店超值专享"
              value="收藏门店超值专享"
            ></el-option>
            <el-option label="热销榜" value="热销榜"></el-option>
            <el-option label="新品专享" value="新品专享"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div slot="com_content">
      <template>
        <el-table :data="tableObj">
          <el-table-column type="expand">
            <template #default="{ row }">
              <el-row>
                <el-col :span="12">
                  <div>商品名：{{ row.name }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div>价格：{{ row.price }}</div>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="180">
          </el-table-column>
          <el-table-column prop="category" label="所属分类" width="180">
          </el-table-column>
          <el-table-column prop="price" label="商品价格"> </el-table-column>
          <el-table-column prop="imgUrl" label="商品图片">
            <template #default="{ row }">
              <img
                :src="
                  'http://localhost:5000/upload/imgs/goods_img/' + row.imgUrl
                "
              />
            </template>
          </el-table-column>
          <el-table-column prop="goodsDesc" label="商品商品描述">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                :type="row.flag ? 'primary' : 'warning'"
                @click="update(row)"
                >{{ row.flag ? "完成" : "修改" }}</el-button
              >
              <el-button type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentSize.currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="currentSize.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>


      <!-- 弹窗 -->
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form label-width="80px" :model="tcObj" styel:width="150px">
        <el-form-item label="商品名称">
          <el-input v-model="tcObj.name"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="tcObj.category">
            <el-option value="新品专享" lable="新品专享"></el-option>
            <el-option value="鲜炒盖饭" lable="鲜炒盖饭"></el-option>
            <el-option value="炒饭系列" lable="炒饭系列"></el-option>
            <el-option value="千万销量" lable="千万销量"></el-option>
            <el-option value="营养适配" lable="营养适配"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <template>
            <el-input-number
              v-model="tcObj.price"
              :min="1"
              :max="100"
              label="描述文字"
            ></el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="图片上传">
          <el-upload
            class="avatar-uploader"
            action=" http://localhost:5000/goods/goods_img_upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="headerUrl" :src="headerUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input
            type="textarea"
            v-model="tcObj.goodsDesc"
            style="widht: 200px"
          ></el-input>
        </el-form-item>
      </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="qr()" >确 定</el-button>
  </div>
</el-dialog>
    </div>
  </com-card>
</template>

<script>
import { api_goodslist,api_goodsdel,api_goodedit } from "../../api/goodType";
import ComCard from "../../components/comCard";

export default {
  components: {
    ComCard,
  },
  data() {
    return {
      tableObj: [],
      currentSize: {
        currentPage: 1,
        pageSize: 4,
      },
      total: 0,
      dialogFormVisible:false,
      tcObj:{},
      headerUrl:""
    };
  },
  mounted() {
    this.query();
  },

  methods: {
   del(id) {
         this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
      let rst = await api_goodsdel({id});
      this.query()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    update(row) {
      this.dialogFormVisible=true
      this.headerUrl=`http://localhost:5000/upload/imgs/goods_img/${row.imgUrl}`
      
      console.log(row.headerUrl);
      this.tcObj=row
    },

    //修改
    async qr(){
      this.dialogFormVisible = false
     let rst= await api_goodedit(this.tcObj)
     console.log(rst);
     let {code,msg}=rst
     if(code==0){
      this.$message.success(msg)
     }
    },
    async query() {
      let rst = await api_goodslist(this.currentSize);
      console.log(rst);
      let { total, data } = rst;
      this.tableObj = data;
      this.total = total;
    },
    handleSizeChange(val) {
      this.currentSize.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.currentSize.currentPage = val;
      this.query();
    },
 

  //更换图片
  handleAvatarSuccess(res, file) {
      console.log(res,file);
      let {code,msg,imgUrl}=res
      this.headerUrl=`http://localhost:5000/upload/imgs/goods_img/${imgUrl}`
        this.tcObj.imgUrl=imgUrl;
      console.log(this.headerUrl,this.headerUrl);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

  },
};
</script>

<style lang="less" scoped>
img {
  width: 100px;
  height: 100px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
